﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery EasyUI Extensions</title>
    <link href="jquery-easyui-1.3.3/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="jquery-easyui-1.3.3/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="icons/icon-all.css" rel="stylesheet" type="text/css" />

    <script src="jquery/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="jquery-easyui-1.3.3/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="jquery.jdirk.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.js" type="text/javascript"></script>

    <script src="jeasyui-extensions/jeasyui.extensions.validatebox.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.combo.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.combobox.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.form.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.menu.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.panel.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.window.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.dialog.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.tree.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.datagrid.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.treegrid.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.combogrid.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.combotree.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jeasyui.extensions.tabs.js" type="text/javascript"></script>

    <script src="icons/jeasyui.icons.all.js" type="text/javascript"></script>

    <script src="jeasyui-extensions/jeasyui.extensions.icons.js" type="text/javascript"></script>
    <script src="jeasyui-extensions/jquery-easyui-toolbar/jquery.toolbar.js" type="text/javascript"></script>

    <script src="jeasyui-extensions/jquery-easyui-portal/jquery.portal.js" type="text/javascript"></script>
    <link href="jeasyui-extensions/jquery-easyui-portal/portal.css" rel="stylesheet" type="text/css" />

    <script src="common/tree-data.js" type="text/javascript"></script>
    <script src="common/index.js" type="text/javascript"></script>
    
    <style type="text/css">
        .top-bar { position: absolute; width: 100%; height: 52px; top: 0px; left: 0px; }
        .top-bar-left { position: absolute; width: 800px; height: 52px; }
        .top-bar-right { position: absolute; width: 400px; height: 52px; right: 0px; }
        .top-bar-right #timerSpan { position: absolute; padding-top: 5px; right: 10px; }
        .top-bar-right #themeSpan { position: absolute; width: 350px; top: 22px; right: 5px; text-align: right; }
        
        .top-toolbar { position: absolute; padding: 0px; width: 100%; height: 27px; top: 52px; left: 0px; border-top-width: 1px; border-bottom-width: 0px; z-index: 100; }
        .top-toolbar #infobar { position: absolute; width: 400px; left: 10px; height: 26px; line-height: 26px; font-size: 12px; }
        .top-toolbar #searchbar { position: absolute; width: 400px; left: 400px; padding-top: 1px; }
        .top-toolbar #buttonbar { position: absolute; width: 600px; right: 5px; text-align: right; }
        
        
        #navTab>div.tabs-header { border-right-width: 0px; }
        #navMenu_list { padding: 0px; margin: 0px; }
        #navMenu_list>li { line-height: 26px; list-style-type: none; }
        #navMenu_list>li>div.panel-header { height: 26px; line-height: 26px; padding: 0px; margin: 0px; }
        #navMenu_list>li:last-child>div.panel-header { border-bottom-width: 0px; }
        #navMenu_list>li>div.panel-header a { width: 100%; height: 100%; padding: 0px; margin: 0px; text-decoration: none; display: inline-block; }
        
        .nav-menu { padding-left: 10px; }
        .nav-menu-icon { padding-left: 25px; background-position: left center; }
        
        #mainTabs_tools table{ border-width: 0px; border-collapse: collapse; border-spacing: 0px; }
        #mainTabs_tools table td{ padding: 0px; }
        body{font-size: 12px;}
    </style>

    <script type="text/javascript">
        $(function () {
            window.mainpage.instMainMenus();
            window.mainpage.instFavoMenus();
            window.mainpage.instTimerSpan();
            window.mainpage.bindNavTabsButtonEvent();
            window.mainpage.bindToolbarButtonEvent();
            window.mainpage.bindMainTabsButtonEvent();


            $("#A1").click(function () {
                $.easyui.loading();
                $.util.call(function () { $.easyui.loaded(); }, 1000);
            });

            var portal = $("#portal");
            $("#A2").click(function () {
                portal.portal("addColumn");
            });

            $("#A3").click(function () {
                portal.portal("removeColumn", portal.portal("columns") - 1);
            });
        });
    </script>
</head>
<body id="mainLayout" class="easyui-layout" data-options="fit: true"  style="padding: 0px; margin: 0px;">
    <div id="northPanel" data-options="region: 'north', border: false" style="height: 80px; overflow: hidden;">
        <div id="topbar" class="top-bar">
            <div class="top-bar-left">
                <h1 style="margin-left: 10px; margin-top: 10px;">jQuery & jEasyUI Extensions</h1>
            </div>
            <div class="top-bar-right">
                <div id="timerSpan"></div>
                <div id="themeSpan">
                    <span>更换皮肤风格：</span>
                    <select id="themeSelector" class="easyui-combobox" data-options="width: 140, editable: false">
                        <option value="default" selected="selected">默认(天空蓝,推荐)</option>
                        <option value="black" >金属黑(推荐)</option>
                        <option value="bootstrap" >银色</option>
                        <option value="gray" >灰霾(推荐)</option>
                        <option value="jquery-easyui-themes/cupertino" >清泉</option>
                        <option value="jquery-easyui-themes/dark-hive" >黑色蜂巢</option>
                        <option value="jquery-easyui-themes/pepper-grinder" >杏黄</option>
                        <option value="jquery-easyui-themes/sunny" >阳光</option>
                        <option value="metro" >磁贴（白）</option>
                        <option value="jquery-easyui-themes-metro/metro-blue" >磁贴（蓝）</option>
                        <option value="jquery-easyui-themes-metro/metro-gray" >磁贴（灰）</option>
                        <option value="jquery-easyui-themes-metro/metro-green" >磁贴（绿）</option>
                        <option value="jquery-easyui-themes-metro/metro-orange" >磁贴（橙）</option>
                        <option value="jquery-easyui-themes-metro/metro-red" >磁贴（红）</option>
                    </select>
                    <a id="btnHideNorth" class="easyui-linkbutton" data-options="plain: true, iconCls: 'layout-button-up'"></a>
                </div>
            </div>
        </div>
        <div id="toolbar" class="panel-header panel-header-noborder top-toolbar" >
            <div id="infobar">
                <span class="icon-hamburg-user" style="padding-left: 25px; background-position: left center;">此处可以放置登录用户账户信息</span>
            </div>
            <div id="searchbar">
                <input id="topSearchbox" class="easyui-searchbox" data-options="width: 350, height: 25, prompt: '您输入您要查找的内容关键词', menu: '#topSearchboxMenu'" />
                <div id="topSearchboxMenu" style="width: 85px;">
                    <div data-options="name:'0', iconCls: 'icon-hamburg-zoom'">查询类型</div>
		            <div data-options="name:'1'">测试类型1</div>
                    <div data-options="name:'2'">测试类型2</div>
                    <div data-options="name:'3'">测试类型3</div>
                    <div data-options="name:'4'">测试类型4</div>
                </div>
            </div>
            <div id="buttonbar">
                <a class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-address'">按钮1</a>
                <a class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-advertising'">按钮2</a>
                <a class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-archives'">按钮3</a>
                <a class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-attibutes'">按钮4</a>
                <a class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-bank'">按钮5</a>
                <a class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-basket'">按钮6</a>
                <a id="btnShowNorth" class="easyui-linkbutton" data-options="plain: true, iconCls: 'layout-button-down'" style="display: none;"></a>
            </div>
        </div>
    </div>

    <div data-options="region: 'west', title: '菜单导航栏', iconCls: 'icon-standard-map', split: true, minWidth: 250, maxWidth: 500" style="width: 260px; padding: 1px;">
        <div id="navTab" class="easyui-tabs" data-options="fit: true, border: true, tools: [{ id: 'navMenu_refresh', iconCls: 'icon-hamburg-refresh' }]">
            <div data-options="title: '导航菜单', iconCls: 'icon-standard-application-view-tile', refreshable: false, selected: true">
                <div id="westLayout" class="easyui-layout" data-options="fit: true">
                    <div data-options="region: 'center', border: false" style="border-bottom-width: 1px;">
                        <div id="westCenterLayout" class="easyui-layout" data-options="fit: true">
                            <div data-options="region: 'north', split: false, border: false">
                                <div class="datagrid-toolbar">
                                    <a id="navMenu_expand" class="easyui-splitbutton" data-options="iconCls: 'icon-metro-expand2', menu: '#navMenu_toggleMenu'">展开</a>
                                    <a id="navMenu_Favo" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-feed-add'">收藏</a>
                                    <a id="navMenu_Rename" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-pencil'">重命名</a>
                                    <div id="navMenu_toggleMenu" class="easyui-menu" data-options="hideOnMouseLeave: true">
                                        <div id="navMenu_collapse" data-options="iconCls: 'icon-metro-contract2'">折叠当前</div>
                                        <div class="menu-sep"></div>
                                        <div id="navMenu_collapseCurrentAll" data-options="iconCls: 'icon-metro-expand'">展开当前所有</div>
                                        <div id="navMenu_expandCurrentAll" data-options="iconCls: 'icon-metro-contract'">折叠当前所有</div>
                                        <div class="menu-sep"></div>
                                        <div id="navMenu_collapseAll" data-options="iconCls: 'icon-standard-arrow-out'">展开所有</div>
                                        <div id="navMenu_expandAll" data-options="iconCls: 'icon-standard-arrow-in'">折叠所有</div>
                                    </div>
                                </div>
                            </div>
                            <div data-options="region: 'center', border: false">
                                <ul id="navMenu_Tree" style="padding-top: 2px; padding-bottom: 2px;"></ul>
                            </div>
                        </div>
                    </div>
                    <div id="westSouthPanel" data-options="region: 'south', border: false, split: true, minHeight: 32, maxHeight: 275" style="height: 275px; border-top-width: 1px;">
                        <ul id="navMenu_list"></ul>
                    </div>
                </div>
            </div>
            <div data-options="title: '个人收藏', iconCls: 'icon-hamburg-star', refreshable: false">
                <div id="westFavoLayout" class="easyui-layout" data-options="fit: true">
                    <div data-options="region: 'north', split: false, border: false">
                        <div class="datagrid-toolbar">
                            <a id="favoMenu_expand" class="easyui-splitbutton" data-options="iconCls: 'icon-metro-expand2', menu: '#favoMenu_toggleMenu'">展开</a>
                            <a id="favoMenu_Favo" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-feed-delete'">取消收藏</a>
                            <a id="favoMenu_Rename" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-pencil'">重命名</a>
                            <div id="favoMenu_toggleMenu" class="easyui-menu" data-options="hideOnMouseLeave: true">
                                <div id="favoMenu_collapse" data-options="iconCls: 'icon-metro-contract2'">折叠当前</div>
                                <div class="menu-sep"></div>
                                <div id="favoMenu_collapseCurrentAll" data-options="iconCls: 'icon-metro-expand'">展开当前所有</div>
                                <div id="favoMenu_expandCurrentAll" data-options="iconCls: 'icon-metro-contract'">折叠当前所有</div>
                                <div class="menu-sep"></div>
                                <div id="favoMenu_collapseAll" data-options="iconCls: 'icon-standard-arrow-out'">展开所有</div>
                                <div id="favoMenu_expandAll" data-options="iconCls: 'icon-standard-arrow-in'">折叠所有</div>
                            </div>
                        </div>
                    </div>
                    <div data-options="region: 'center', border: false">
                        <ul id="favoMenu_Tree" style="padding-top: 2px; padding-bottom: 2px;"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div data-options="region: 'center'" style="padding: 1px;">
        <div id="mainTabs_tools">
            <table>
                <tr>
                    <td><a id="mainTabs_junmpHome" class="easyui-linkbutton easyui-tooltip" data-options="plain: true, iconCls: 'icon-hamburg-home', content: '跳转至主页选项卡'"></a></td>
                    <td><div class="datagrid-btn-separator" ></div></td>
                    <td><a id="mainTabs_closeTab" class="easyui-linkbutton easyui-tooltip" data-options="plain: true, iconCls: 'icon-standard-application-form-delete', content: '关闭当前选中的选项卡'"></a></td>
                    <td><a id="mainTabs_closeOther" class="easyui-linkbutton easyui-tooltip" data-options="plain: true, iconCls: 'icon-standard-cancel', content: '关闭除当前选中外的其他所有选项卡'"></a></td>
                    <td><div class="datagrid-btn-separator" ></div></td>
                    <td><a id="mainTabs_closeLeft" class="easyui-linkbutton easyui-tooltip" data-options="plain: true, iconCls: 'icon-standard-tab-close-left', content: '关闭左侧所有选项卡'"></a></td>
                    <td><a id="mainTabs_closeRight" class="easyui-linkbutton easyui-tooltip" data-options="plain: true, iconCls: 'icon-standard-tab-close-right', content: '关闭右侧所有选项卡'"></a></td>
                    <td><div class="datagrid-btn-separator" ></div></td>
                    <td><a id="mainTabs_closeAll" class="easyui-linkbutton easyui-tooltip" data-options="plain: true, iconCls: 'icon-standard-cross', content: '关闭所有选项卡'"></a></td>
                </tr>
            </table>
        </div>
        <div id="mainTab" class="easyui-tabs" data-options="fit: true, border: true, showOption: true, enableNewTabMenu: true, repeatable: true, tools: '#mainTabs_tools'">
            <div id="homePanel" data-options="title: '主页', iconCls: 'icon-hamburg-home'">
                <div class="easyui-layout" data-options="fit: true">
                    <div data-options="region: 'north', split: false, border: false">
                        <div class="datagrid-toolbar">
                            <a id="A1" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-hamburg-config'">设置</a>
                            <a id="A2" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-add'">添加一列</a>
                            <a id="A3" class="easyui-linkbutton" data-options="plain: true, iconCls: 'icon-standard-delete'">删除一列</a>
                        </div>
                    </div>
                    <div data-options="region: 'center', border: false">
                        <div id="portal" class="easyui-portal" data-options="fit: true, border: false">
                            <div style="width: 33%;">
                                <div data-options="title: '测试面板1', height: 300, closable: true">
                                    <input />
                                    <hr />
                                    <select class="easyui-combobox" data-options="width: 150">
                                        <option value="0">0</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                    </select>
                                </div>
                                <div data-options="title: '项目根目录', height: 200, iniframe: true, href: 'http://localhost:15975/'"></div>
                            </div>
                            <div style="width: 33%;">
                                <div data-options="title: '百度', height: 220, iniframe: true, href: ''"></div>
                                <div data-options="title: '腾讯', height: 250, iniframe: true, href: ''"></div>
                            </div>
                            <div style="width: 33%;">
                                <div data-options="title: '测试面板2', height: 250, closable: true"></div>
                                <div data-options="title: '测试面板3', height: 350, closable: true"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div data-options="region: 'south', title: '关于...', iconCls: 'icon-standard-information', collapsed: true, border: false" style="height: 70px;"></div>
</body>
</html>
